<template>
    <el-row class="back-tabs">
        <el-col :span="20" :offset="2">
            <div class="schedule">
                <el-steps :active="schedule" align-center>
                    <el-step title="提交申请" description="填写您的账号，验证成功后进行重置密码操作"></el-step>
                    <el-step title="设置新密码" description="填写您的新密码及我们发送给您的验证码信息，我们将对您的密码进行重置"></el-step>
                    <el-step title="成功" description="重置成功"></el-step>
                </el-steps>
            </div>
            <div class="back-operate">
                <el-form ref="backInfo" :rules="rules" :model="backInfo" label-width="80px">
                    <el-form-item v-if="schedule>1&&schedule<3">
                        <el-button class="previous" type="primary" @click="previous" size="small">上一步</el-button>
                    </el-form-item>
                    <div v-if="schedule===1">
                        <el-form-item>
                            <span class="description">请填写您的账号</span>
                        </el-form-item>
                        <el-form-item label="账号" prop="account" class="label">
                            <el-input v-model="backInfo.account" placeholder="请填写Email地址"></el-input>
                        </el-form-item>
                    </div>
                    <div v-else-if="schedule===2">
                        <el-form-item>
                            <span class="description">准备重置您的密码，请填写新密码和我们发送给您的验证码</span>
                        </el-form-item>
                        <el-form-item label="新密码" prop="password" class="label">
                            <el-input v-model="backInfo.password" placeholder="6-18个字符组成，区分大小写"
                                      show-password></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="resetPassword" class="label">
                            <el-input v-model="backInfo.resetPassword" placeholder="6-18个字符组成，区分大小写"
                                      show-password></el-input>
                        </el-form-item>
                        <el-form-item label="验证码" prop="authCode" class="label">
                            <el-input v-model="backInfo.authCode" placeholder="请输入验证码"></el-input>
                        </el-form-item>
                    </div>
                    <div v-else-if="schedule===3">
                        <div class="success-info">
                            <icon-font class="success-icon" href="#cesuccess"></icon-font>
                            <span class="success-text">修改成功</span>
                        </div>
                        <div>
                            <el-button type="success" @click="goToLogin">前往登录</el-button>
                        </div>
                    </div>
                    <div v-if="schedule<3">
                        <el-button type="primary" @click="next">下一步</el-button>
                    </div>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    import { mapActions } from 'vuex'

    export default {
        name: 'back',
        data () {
            return {
                schedule: 1,
                backInfo: {
                    account: '',
                    password: '',
                    resetPassword: '',
                    authCode: ''
                },
                validateResetPassword: (rule, value, callback) => {
                    if (value !== this.backInfo.password) {
                        callback(new Error('两次输入密码不一致!'))
                    } else {
                        callback()
                    }
                },
                rules: {
                    account: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { type: 'email', message: '账号格式错误，是Email地址哦', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { type: 'string', message: '密码格式错误', trigger: 'blur' },
                        { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
                    ],
                    resetPassword: [
                        { required: true, message: '请输入确认密码', trigger: 'blur' },
                        { type: 'string', message: '密码格式错误', trigger: 'blur' },
                        { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' },
                        { validator: this.validateResetPassword, trigger: 'blur' }
                    ],
                    authCode: [
                        { required: true, message: '验证码不可为空', trigger: 'blur' },
                        { len: 6, message: '验证码长度为6', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            ...mapActions({
                sendAuthCodeAction: 'user/sendAuthCode',
                resetPasswordAction: 'user/resetPassword'
            }),
            next () {
                this.check()
                if (this.schedule === 1) {
                    this.$refs['backInfo'].validateField('account', message => {
                        if (!message) {
                            this.action(this.sendAuthCodeAction(this.backInfo.account), data => {
                                this.schedule++
                            })
                        } else {
                            return false
                        }
                    })
                } else if (this.schedule === 2) {
                    this.$refs['backInfo'].validate((valid) => {
                        if (valid) {
                            this.action(this.resetPasswordAction(this.backInfo), data => {
                                this.schedule++
                            })
                        } else {
                            return false
                        }
                    })
                }
            },
            previous () {
                this.check()
                this.schedule--
            },
            check () {
                if (this.schedule < 1 || this.schedule > 3) {
                    this.$message.error('错误的逻辑访问')
                }
            },
            goToLogin () {
                this.$router.push('/login')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .back-tabs {
        margin: 20px 0;

        .schedule {
            padding: 32px 0;
        }

        .back-operate {
            padding: 32px;

            .previous {
                float: right;
            }

            .description {
                font-size: 24px;
            }

            .label {
                width: 60%;
            }

            .success-info {
                padding: 32px 0;
                margin: 24px 0;
                display: -webkit-inline-flex;

                .success-icon {
                    width: 50px;
                    height: 50px;
                }

                .success-text {
                    font-size: 36px;
                    line-height: 50px;
                    color: #00ff00;
                }
            }
        }
    }
</style>
